<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>扫码支付</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Expires" content="-1">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Pragma" content="no-cache">
    <meta name="description" content="！">
    <meta name="Keywords" content="">

    <link rel="stylesheet" href="${contextPath}/staticwx/main/css/reset.css">
    <link rel="stylesheet" href="${contextPath}/staticwx/main/css/global.css">
    <link rel="stylesheet" href="${contextPath}/staticwx/main/css/flex.css">
    <link rel="stylesheet" href="${contextPath}/staticwx/qs/css/reset.css">
    <link rel="stylesheet" href="${contextPath}/staticwx/qs/css/global.css">
    <link rel="stylesheet" href="${contextPath}/staticwx/qs/css/iconfont.css">
    <link rel="stylesheet" href="${contextPath}/staticwx/qs/css/order.css">

</head>
<body style="background-color: white;">
<div class="ac" style="padding:15px;background:#efefef">
    <img src="${mt.mtimg!}" alt="" width="80px">
    <p class="f16">${mt.mtname!}</p>
</div>
<div style="padding:10px 10px 0 10px">
    <form  class="baseForm " id="zzForm">
        <div class="baseLine " flex="corss:center">
            <label for="">转账金额</label>
            <div class="inputArea"><input type="number" id="jine" name="jine"></div>
            <span style="line-height:35px">元</span>
        </div>
        <!-- 支付方式 -->
        <div class="orderTit" style="margin-top:2px;">支付方式</div>
        <ul class="psList">
            <li>
                <img src="${contextPath}/staticwx/qs/images/wechat.png" alt="">
                <div class="detail">
                    <p class="tit">微信支付</p>
                    <p>推荐微信用户使用</p>
                </div>
                <div class="radioBtn radioBtnCss fl selected" data-paytype="1">
                    <span class="iconfont gou"></span>
                    <input type="radio" name="choosePs">
                </div>
            </li>
            <li>
                <img src="${contextPath}/staticwx/qs/images/yue.png" alt="">
                <div class="detail">
                    <p class="tit">余额支付</p>
                    <p>当前余额：￥${account.balance?string("0.00")} <#if account.balance?? && account.balance lt 100><a href="${contextPath}/wx/member/goCharge.htm" style="margin-left:15px;">充值</a></#if></p>
                </div>
                <div class="radioBtn radioBtnCss fl" data-paytype="2">
                    <span class="iconfont gou"></span>
                    <input type="radio" name="choosePs">
                </div>
            </li>
            <li>
                <img src="${contextPath}/staticwx/qs/images/jifen.png" alt="">
                <div class="detail">
                    <p class="tit">积分支付</p>
                    <p>当前积分：${account.integral}积分</p>
                </div>
                <div class="radioBtn radioBtnCss fl" data-paytype="3">
                    <span class="iconfont gou"></span>
                    <input type="radio" name="choosePs">
                </div>
            </li>
        </ul>
    </form>
    <input type="hidden" name="orderNo" id="orderNo" value=""/>
    <input type="hidden" name="mid" id="memberId" value="${mid!}"/>

    <input type="hidden" id="appId" value=""/>
    <input type="hidden" id="timeStamp" value=""/>
    <input type="hidden" id="nonceStr" value=""/>
    <input type="hidden" id="packages" value=""/>
    <input type="hidden" id="paySign" value=""/>

    <input type="hidden" id="orderType" value="3"/>
    <input type="hidden" id="payType" name="payType" value="1"/>

    <input type="hidden" name="openId" id="openId" value="${Session['cur_openid']!}"/>
    <input type="hidden" name="cityId" id="cityId" value="${Session['cur_city_id']!}"/>

    <a href="javascript:void(0);" class="submitBtn" style="background-color: #09bb07;">立即支付</a>
</div>


<script src="${contextPath}/staticwx/main/js/jquery-3.0.0.min.js" type="text/javascript"></script>
<script src="${contextPath}/staticwx/main/js/jquery.validate.min.js" type="text/javascript"></script>
<script src="${contextPath}/staticwx/jweixin-1.0.0.js" type="text/javascript"></script>
<script>
        $("#jine").focus();

        $("#zzForm").validate({
            ignore:"",
            rules:{
                jine:{required:true,min:0}
            },
            messages:{
                jine:{required:"请输入金额！",min:"转账金额错误！"}
            },
            errorPlacement: function( error, element ) {
                error.insertAfter(element);
            },
            errorClass : "onError",
            errorElement: "span"
        });
        $(".submitBtn").click(function(){
            var ret = $("#zzForm").valid();
            if (ret) {
                subOrder();
            }
        });

        $("#jine").keyup(function(){
            var ret = $("#zzForm").valid();
            if(ret){
                $(".showDK").slideDown();
                $(".droploadWarp").css("top","360px")
            }
        });

        $(".radioBtn input[type='radio']").click(function(){
            $(this).parents(".psList").find(".selected").removeClass("selected");
            $(this).parent(".radioBtn").addClass("selected");
            var paytype=$(this).parent(".radioBtn").data("paytype");
            $("#payType").val(paytype);
        });

        /*提交订单数据*/
        function  subOrder() {
            var orderNo=$("#orderNo").val();
            var payType=$("#payType").val();
            if(orderNo){//表示订单已生成
                if(payType==1){
                    var openId=$("#openId").val();
                    var appId=$("#appId").val();
                    var timeStamp=$("#timeStamp").val();
                    var nonceStr=$("#nonceStr").val();
                    var packages=$("#packages").val();
                    var paySign=$("#paySign").val();
                    callWxpay(appId,timeStamp,nonceStr,packages,paySign,orderNo);
                    return false;
                }
            }else{
                var orderType=$("#orderType").val();//1-常规下单；2-充值订单;3-收款订单;
                var cityId=$("#cityId").val();
                var totalAmount=$("#jine").val();
                var memberId=$("#memberId").val();
                createOrder(orderType,payType,cityId,totalAmount,memberId);
            }

        }

        /*创建订单*/
        function createOrder(orderType,payType,cityId,totalAmount,memberId){
            $.ajax({
                url : '${contextPath}/wx/order/createOrder.htm',
                data : {
                    totalAmount:$("#jine").val(),
                    memberId:$("#memberId").val(),
                    orderType:$("#orderType").val(),
                    payType:$("#payType").val(),
                    cityId:$("#cityId").val()
                },
                type : 'post',
                cache : false,
                dataType : 'json',
                success : function(data) {
                    var json = $.parseJSON(data);
                    if (json.isSuccess == true) {
                        var orderNo=json.orderNo;
                        var openId=$("#openId").val();
                        $("#orderNo").val(orderNo);
                        if(payType==1){
                            doWxPay(orderNo,openId);
                        }else if(payType==2||payType==3){
                            location.href="${contextPath}/wx/wxpay/result.htm?oid="+orderNo+"&&result=SUCCESS";
                        }
                    }else{
                        alert(json.errMessage);
                        //showMsg(json.errMessage);
                    }
                },
                error : function() {
                    //alert("订单提交异常！");
                }
            });
        }

        /*获取微信支付设置*/
        function doWxPay(orderNo,openId){
            $.ajax({
                url : '${contextPath}/wx/wxpay/fastPay.htm',
                data : {orderNo:orderNo,openId:openId},
                type : 'post',
                cache : false,
                dataType : 'json',
                success : function(data) {
                    var json = $.parseJSON(data);
                    if (json.isSuccess == true) {
                        var appId=json.appId;
                        var timeStamp=json.timeStamp;
                        var nonceStr=json.nonceStr;
                        var packages=json.packages;
                        var paySign=json.sign;
                        $("#appId").val(appId);
                        $("#timeStamp").val(timeStamp);
                        $("#nonceStr").val(nonceStr);
                        $("#packages").val(packages);
                        $("#paySign").val(paySign);
                        callWxpay(appId,timeStamp,nonceStr,packages,paySign,orderNo);
                    }else{
                        showMsg(data.msg);
                    }
                },
                error : function() {
                    //alert("订单提交异常！");
                }
            });

        }
        /*发起微信支付*/
        function callWxpay(appId,timeStamp,nonceStr,packages,sign,orderNo){
            var appId=appId;
            var timeStamp=timeStamp;
            var nonceStr =nonceStr;
            var packages=packages;
            var paySign=sign;
            WeixinJSBridge.invoke('getBrandWCPayRequest',{
                "appId" : appId,"timeStamp" : timeStamp, "nonceStr" : nonceStr, "package" : packages,"signType" : "MD5", "paySign" : paySign
            },function(res){
                WeixinJSBridge.log(res.err_msg);
                if(res.err_msg == "get_brand_wcpay_request:ok"){
                    location.href="${contextPath}/wx/wxpay/result.htm?oid="+orderNo+"&result=SUCCESS";
                }else if(res.err_msg == "get_brand_wcpay_request:cancel"){
                    alert("支付取消!");
                }else{
                    alert(res.err_msg);
                    alert("支付失败!");
                }
            })
        }


</script>
</body>

</html>